<template>
  <!-- 精彩视频 -->
 <div class="great-video-box">
     <HeadTitle :title="title" :isMore='isMore' @more="more"></HeadTitle>
      <van-list
      v-if="isSearchResult"
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad"
        :offset="10"
    >
      <van-cell v-for="item in greatViewList" :key="item.id" class="li-item" @click="linklookBackVideo(item)">
         <img :src="item.imagUrl" alt=""/>
         <p>{{item.title | ellipsis(9)}}</p>
         <p>{{item.subTitle | ellipsis(11)}}</p>
         <div class="num-box">{{item.fwCount||item.pv||'0'}}人浏览过</div>

      </van-cell>
    </van-list>


     <ul v-else>
       <li v-for="(item ,i) in greatViewList" :key="i" class="li-item" @click="linklookBackVideo(item)">
         <img :src="item.imagUrl" alt=""/>
         <p>{{item.title | ellipsis(9)}}</p>
         <p>{{item.subTitle | ellipsis(11)}}</p>
         <div class="num-box">{{item.fwCount||'0'}}人浏览过</div>
       </li> 
     </ul>
 </div>
</template>

<script>
import HeadTitle from './headTitle' //头部标题组件
import LiveStatus from './liveStatus'//直播状态组件
  export default {
     components:{
       HeadTitle,
       LiveStatus,
     },
    props: {
      status : 0,
      title:String,
      isMore:Boolean,
      greatViewList:Array,
      loading:Boolean,
      finished:Boolean,
      searchFinished:Boolean,
      isSearchResult:Boolean,
    
    },
    data(){
      return {
      };
    },
    computed: {},
    created() {},

    mounted() {
     
    },
    methods: {
      onLoad(){
        this.$emit('loadeMore',{type:'loadeMore',data:{'data':'加载更多'}})
      },
      // 频道位>更多
       more() {
        this.$emit("more");
      },
       //跳转回看
			 linklookBackVideo(v){
        this.$router.push(`/${this.$channel}/liveBack/${v.id}?dzhPage=true`);
			 }
    },
    watch: {
      searchFinished(val){
        if(val){
          this.loading = false;
          this.finished = true; //加载完成
        }
      }
    },
     filters: {
      //标题超过num个显示省略号
      ellipsis: function (value,num) {
        if (!value) return ''
        return value.length > num ? value.substring(0,num)+'...' : value
      } 
      }
  };
</script>
<style scoped="scoped">
 .great-video-box{
   padding:0 30px;
 }
 .van-list__finished-text{
   color: chartreuse!important;;
   font-size: 60px;
 }
 .great-video-box ul,.van-list{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 .li-item{
	 width: 330px;
	 margin-bottom: 24px;
 }
 .li-item:nth-of-type(odd){ 
	 margin-right: 20px;
 } 
 .li-item img{
	width: 100%;
	 height: 188px;
   margin-bottom: 10px;
	 border-radius: 10px;
 }
 .li-item p:first-of-type{
	margin-bottom: 10px;
	font-size: 30px;
	color: #333333;
	letter-spacing: 1px;
 }
 .li-item p:last-of-type{
    font-size: 26px;
    color: #ACACAC;
    letter-spacing: 1px;
    line-height: 36px;
 }
 .li-item{
   position: relative;
 }
 .li-item .num-box{
   position: absolute;
   top: 152px;
   left: 0;
   height: 36px;
   width: 330px;
   padding-left: 10px;
   font-size: 22px;
   font-weight: 500;
   line-height: 36px;
   color:rgba(255, 255, 255, 1);
   background:rgba(0, 0, 0, 0.5);
   border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
 }
</style>
